<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="applicable-device" content="mobile"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <!--<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">-->
    <meta name="format-detection" content="telephone=no"/>

    <link rel="stylesheet" href="css/all.css"/>
    <script src="lib/flexible.js"></script>
</head>
<body>
<!--<form class="form-top" action="" method="">-->
<!-- header -->
    <header class="header2">
        <a href="" class="return"><img src="img/234d_03.png" /></a>
        <span class="word">剪&nbsp;&nbsp;裁</span>
        <input class="fun but-use" id="clipBtn" type="button" value="使用">
    </header>
<!-- /header -->
<!-- bodyer -->
<div class="top-photo">
    <a class="a-file" href="javascript:void(0);">
        选择头像
        <input type="file" id="file">
    </a>
    <div id="clipArea"></div>
</div>
<!-- /bodyer -->
<!--</form>-->
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/tailor/iscroll-zoom.js"></script>
<script src="lib/tailor/hammer.js"></script>
<script src="lib/tailor/lrz.all.bundle.js"></script>
<script src="lib/tailor/jquery.photoClip.js"></script>
<script>
    //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    var clipArea = new bjj.PhotoClip("#clipArea", {
        size: [260, 260],
        outputSize: [640, 640],
        file: "#file",
        ok: "#clipBtn",
        loadStart: function() {
            console.log("照片读取中");
        },
        loadComplete: function() {
            console.log("照片读取完成");
        },
        clipFinish: function(dataURL) {
            console.log(dataURL);
            //todo
        }
    });
    //clipArea.destroy();
</script>
</body>
</html>
